<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Memleft active="memShenqing"/>
    </div>
    <div class="member_right">
      <div class="none_mem" v-if="total * 1 === 0">
        <div style="padding-bottom: 70px;" class="clear">
          <img :src="nonoe" class="noneimg">
          <div>
            你还没有申请职位
          </div>
          <div class="btns" @click="add()">去申请</div>
        </div>
      </div>
      <div v-if="total * 1 > 0">
        <div class="listcount">共申请过<span>{{total}}个职位</span></div>
        <div class="jobtab clear" v-for="(item, index) in ListList" :key="index" @click="toInfo(item.positionId)">
          <div class="stuatsdo ycy" v-if="item.applyState == 1"></div>
          <div class="stuatsdo gxq" v-else-if="item.applyState == 2"></div>
          <div class="stuatsdo mxq" v-else-if="item.applyState == 3"></div>
          <div class="stuatsdo yms" v-else-if="item.applyState == 4"></div>
          <div class="stuatsdo dcy" v-else></div>
          <div class="list-row">
            <div class="zwname" @click="todetail(item)">{{item.positionName}}</div>
            <el-badge v-if="item.applyState != 5" style="cursor: pointer;"
              :value="item.homeAddress > 99 ? '99+' : item.homeAddress" 
              :hidden="!item.homeAddress || item.homeAddress == 0">
              <el-button class="btn-goutong" size="small" @click.stop="showLY(item)">立即沟通</el-button>
            </el-badge>
            <div class="gsinfo" @click="tocompany(index)">
              <img :src="item.logo"/><b>{{item.companyName}}</b>
            </div>
          </div>
          <div class="clear">
            <div class="jieshao">
              <b>{{item.wageRange}}
                万/月</b>
              <span>{{item.experience}}年经验</span>
              <span>{{item.educational}}</span>
              <span>招{{item.zprs}}人</span>
            </div>
            <div class="gsjj">
              <span v-if="item.industry">{{item.industry}}</span><span v-if="item.enterpriseNature">{{item.enterpriseNature}}</span>
              <span v-if="item.companySize">{{item.companySize}}</span>
            </div>
          </div>
          <div class="clear">
            <div style="float: left">
              <div class="taglist">五险一金</div>
              <div class="taglist">年终奖金</div>
              <div class="taglist">周末双休</div>
              <div class="taglist">不加班</div>
              <div class="taglist">绩效奖金</div>
              <div class="taglist">定期体检</div>
            </div>
            <div style="float: right">
              <p class="shenqingyu">申请于{{item.applyTime}}</p>

            </div>
          </div>

        </div>
        <div style="text-align: center">
          <el-pagination background
            layout="prev, pager, next"
            :page-size="search.pageSize"
            :current-page="search.pageNum"
            @current-change="getpost"
            :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog
      width="600px"
      :visible.sync="lyVisible"
      @close="onLYClose"
      append-to-body>
      <JwChat v-if="lyVisible" :taleList="chatList" class="chart-box" @enter="bindEnter" v-model="chatInput"
        :toolConfig="{show:[]}"/>
  </el-dialog>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Memleft from '../../components/memleft'
import headImg from '../../assets/img/gerens.png'
import { getPositionListByCollection, GetLYHistory, AddLY,ReadLY  } from '../../assets/js/domains'
import nonoe from '../../assets/img/weijian.png'
import moment from 'moment'

export default {
  name: 'MemShenqing',
  components: { Memleft },
  directives: {},
  data: function () {
    return {
      total: 0,
      nonoe: nonoe,
      ListList: [],
      search: {
        pageNum: 1,
        pageSize: 36,
        user_uid: ''
      },
      chatList:[],
      chatInput:'',
      lyVisible: false,
      curRow: null,
      liuyan:{
        pageNum: 0,
        pageSize: 500
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.search.user_uid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    this.getpost()
  },
  methods: {
    welfareRemarkhtml: function (item) {
      if (item) {
        const mp = item.split(',')
        let htmls = ''
        for (let i = 0; i < mp.length; i++) {
          htmls = htmls + ' <div style="height: 36px;line-height: 34px;background: #f6f6f8;border: 1px solid #f6f6f8;border-radius: 6px;padding: 0 15px;font-size: 16px;float: left;margin-right: 10px;margin-top: 5px;">' + mp[i] + '</div>'
        }

        return htmls
      } else {
        return ''
      }
    },
    
    add: function () {
      window.location.href = 'job.html'
    },
    getpost: function (page) {
      const _this = this
      page && (this.search.pageNum = page)
      getPositionListByCollection(this.search).then(function (res) {
        if (res.code === 200) {
          _this.ListList = res.data.content
          _this.total = res.data.totalElements
        }
      })
    },
    toInfo: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    },
    showLY(row){
      this.curRow = row
      let params = {
        qzz_id: this.curUserInfo.userUid,
        zpz_user_id: row.enterpriseUid,
        zw_id: row.id,
        pageNum: this.liuyan.pageNum,
        pageSize: this.liuyan.pageSize
      }
      
      GetLYHistory(params).then(res => {
        this.lyVisible = true
        if(!res || !res.list || !res.list.length){
          return
        }

        this.chatList = res.list.map(item => {
          let isMine = item.lyLb === '求职者'
          return {
            date: item.lyTime,
            text: { text: item.lyNr },
            mine: isMine,
            name: isMine ? "我" : row.companyName,
            img: (isMine ? this.curUserInfo.header : row.logo) || headImg
          }
        })
      }).catch(err => {
        console.log(err)
      })

      ReadLY({
        qzz_id: this.curUserInfo.userUid,
        zpz_user_id: row.enterpriseUid,
        zw_id: row.id,
        zpz_or_qzz: 'qzz'
      }).then(() => {
        row.homeAddress = ''
      }).catch(()=>{})
    },
    bindEnter(){
      if(!this.chatInput) return
      let text = this.chatInput
      this.validSensWords(null, this.chatInput, valid => {
        if(valid){
          this.$alert(valid)
          this.chatInput = text
          return;
        }
        this.addLY(text)
      })
    },
    addLY(text){
      let userInfo = JSON.parse(localStorage.getItem('md_userInfo') || '{}')
      let params = {
        qzz_id: userInfo.userUid,
        zpz_user_id: this.curRow.enterpriseUid,
        zw_id: this.curRow.id,
        ly_lb: '求职者',
        sf_hf: '否',
        hf_id: '',
        ly_nr: text
      }
      AddLY(params).then(res => {
        if(res !== 'success'){
          this.$message.error("留言保存失败，请重试")
          return
        }
        this.chatList.push({
          date: moment().format("YYYY-MM-DD HH:mm:ss"),
          text: { text },
          mine: true,
          name: "我",
          img: userInfo.header || headImg
        })
      }).catch(err => {
        this.$message.error(err.message || "留言保存失败")
      })
    },
    onLYClose(done){
      this.chatList = []
      this.chatInput = ''
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
  
</style>
<style>
.el-badge__content{
  border-bottom-left-radius: 3px;
  border:none;
}
.chart-box .toolsBox{
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}
</style>
